<template>
  <div class="home" style="width: 100%;height:100%;">
    <div class="content">
        <div class="top1">
            <Button style="width:150px;margin: 8px 2px;" :class="{addBtn:btns==1}" @click="getDataOne(1)">已上架</Button>
            <Button style="width:150px;margin: 8px 2px;" :class="{addBtn:btns==2}" @click="getDataOne(2)">已下架</Button>
        </div>
        <div class="top2">
            <Input class="searchInput" v-model="value" @keyup.enter.native="searchGood" placeholder="请输入商品名称搜索"></Input>
            <Button type="success" @click="searchGood">搜索</Button>
            <Button type="success" style="float: right;margin-right:15px;" @click="go_addshop">添加商品</Button>
        </div>

        <div class="container">
            <div class="shopList">
                <div class="shop" v-for="(item,index) in shopListData" :key="index">
                    <div class="shopImg">
                        <img :src="item.cover" alt="" class="shop_img">
                    </div>
                    <div class="shopMessage">
                        <p v-cloak class="name">{{item.name}}</p>
                        <p class="price" v-cloak>价格: <span>{{item.price/100}}元</span></p>
                        <p class="sale" v-cloak>销量: <span>{{item.sales}}</span></p>
                        <p class="kucun" v-cloak>库存: <span>{{item.stock}}</span></p>
                    </div>
                    <div class="tool">
                      <Poptip confirm :title="downContent" @on-ok="okDown(item.id, index)" @on-cancel="cancelDown">
                        <Button type="info" size="small" class="tool_btn" @click="judgeDown(item.status)">{{ downBtn }}</Button>
                      </Poptip>
                      <Button type="success" size="small" class="tool_btn" @click="edit(item.id)">编辑</Button>
                      <Poptip confirm title="确定要删除吗？" @on-ok="okDel(item.id, index)" @on-cancel="cancelDel">
                        <Button type="warning" size="small" class="tool_btn" >删除</Button>
                      </Poptip>
                    </div>
                </div>
            </div>
            <Page :total="total" :current="current_page" :page-size="per_page" show-total @on-change="changePage" show-elevator class="page"></Page>
        </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import { good_list, del_good, down_good, search_good } from "../../api/shop/shop.js";
export default {
  data() {
    return {
      btns: 0,
      value: "",
      total: 0,
      page: 1,
      current_page: 1,
      per_page: 0,
      status: 1,
      downBtn: "上架",
      downContent: '',
      shopListData: []
    };
  },
  mounted() {
  },
  methods: {
    //根据商品名称进行搜索
    searchGood() {
      search_good({
        status: this.btns,
        page: 1,
        good_name: this.value
      }).then(res => {
        this.shopListData = res.data.data;
        this.total = res.data.total;
        this.per_page = res.data.per_page;
      });
    },
    changePage(val) {
      var that = this;
      that.$data.page = val;
      localStorage.setItem("shopPage",this.page)
      this.getData(this.btns);
    },
    edit(id) {
      localStorage.setItem("shop_id", id);
      this.$router.push({ name: "shopDetail", params: { id: id } });
    },
    okDown(id, index) {
      down_good({ id: id }).then(res => {
        this.shopListData.splice(index, 1);
        this.total -= 1;
        this.$Message.success("更改成功！");
      });
    },
    judgeDown(status) {
      if(status == 1){
        this.downContent = '确定下架该商品吗？';
      }else if (status == 2){
        this.downContent = '确定上架该商品吗？';
      }
    },
    cancelDown() {
      this.$Message.info('已取消该次操作');      
    },
    okDel(id, index) {
      del_good({ id: id }).then(res => {
        this.shopListData.splice(index, 1);
        this.total -= 1;
        this.$Message.success("删除成功！");
      });
    },
    cancelDel() {
      this.$Message.info('已取消该次操作');
    },
    // 跳转添加商品
    go_addshop() {
      localStorage.setItem("shop_id", -1);
      this.$router.push({ name: "shopAdd" });
    },
    getDataOne(status) {
      localStorage.setItem("shopPage", 1)
      //记住当前商品状态
      localStorage.setItem("shopStatus",status)
      this.getData(status)
    },
    getData(status) {
      this.btns = status;
      status == 1 ? (this.downBtn = "下架") : "上架";
      status == 2 ? (this.downBtn = "上架") : "下架";
      good_list({
        status: status,
        page: localStorage.getItem("shopPage")
      }).then(res => {
        this.shopListData = res.data.data;
        this.total = res.data.total;
        this.per_page = res.data.per_page;
        this.current_page = Number(localStorage.getItem("shopPage"))
      });
    }
  },
  created() {
    if(localStorage.getItem("shop_id")==-1){
      localStorage.setItem("shopPage", 1)
    }
    if(!localStorage.getItem("shopStatus")){//刚进入页面没有商品状态的时候先初始化一个状态
      localStorage.setItem("shopStatus", 1)
    }
    this.getData(localStorage.getItem("shopStatus"));
  }
};
</script>
<style lang="scss" scoped>
@import "../../css/common.scss";
.content {
  width: 95%;
  margin: 20px auto;
  > .top1 {
    margin-bottom: 20px;
    margin-left: 15px;
  }
  > .top2 {
    margin-left: 15px;
    margin-bottom: 20px;
    > .searchInput {
      width: 350px;
      @media screen and (max-width: 780px) {
        width: 200px;
      }
    }
  }
  > .container {
    overflow: hidden;
    width: 100%;
    > .shopList {
      width: 100%;
      font-size: 0;
      > .shop {
        width: 19%;
        margin: 20px 3%;
        display: inline-block;
        vertical-align: top;
        background: #fff;
        border-radius: 6px;
        padding: 8px;
        box-shadow: 1px 1px 1px 1px #e6e6e6;
        @media screen and (max-width: 1250px) {
          width: 28%;
          margin: 15px 2.6%;
        }
        @media screen and (max-width: 930px) {
          width: 45%;
          margin: 15px 2.5%;
        }
        @media screen and (max-width: 670px) {
          width: 94%;
          margin: 15px 3%;
        }
        > .shopImg {
          width: 100%;
          > img {
            width: 100%;
          }
        }
        > .shopMessage {
          padding: 10px 8px;
          .name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          > .price {
            color: #b09999;
          }
          > .sale {
            color: #b09999;
          }
          > .kucun {
            color: #b09999;
          }
          > p {
            font-size: 16px;
            font-weight: bolder;
            @media screen and (max-width: 1250px) {
              font-size: 16px;
            }
            > span {
              color: #19be6b;
            }
          }
        }
        > .tool {
          text-align: center;
          padding: 5px 0;
          display: flex;
          justify-content: space-around;
          > .tool_btn {
            margin-left: 8px;
            width: 30%;
            @media screen and (max-width: 1250px) {
              font-size: 16px;
            }
            @media screen and (max-width: 670px) {
              font-size: 16px;
            }
          }
        }
      }
    }
    > .page {
      float: right;
      margin-top: 15px;
    }
  }
}
</style>